
export const X6_NODE_NAME = 'dag-task'
export const X6_EDGE_NAME = 'dag-edge'
export const X6_PORT_OUT_NAME = 'dag-port-out'

const EDGE_COLOR = '#57a8f7'
const BG_BLUE = '#DFE9F7'
const BG_WHITE = '#FFFFFF'
const STROKE_BLUE = '#8665FF'
const NODE_SHADOW = 'drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.2))'
const EDGE_SHADOW = 'drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.2))'

 
export const PORT =  {
  groups: {
    in: {
      position: "top",
      attrs: {
        circle: {
          r: 5,
          magnet: true,
          stroke: "rgb(155,169,195)",
          strokeWidth: 1,
          fill: "#fff",
        },
      }, 
      args: { r: 6, magnet: true, },
    },
    
    out: {
      position: "bottom",
      attrs: {
        circle: {
          r: 5,
          magnet: true,
          stroke: "rgb(155,169,195)",
          strokeWidth: 1,
          fill: "#fff",
        },
      },
      args: { r: 6, magnet: true,  },
    },
    left: {
      position: "left",
      attrs: {
        circle: {
          r: 5,
          magnet: true,
          stroke: "rgb(155,169,195)",
          strokeWidth: 1,
          fill: "#fff",
        },
      }, 
      args: { r: 6, magnet: true, },
    },
    right: {
      position: "right",
      attrs: {
        circle: {
          r: 5,
          magnet: true,
          stroke: "rgb(155,169,195)",
          strokeWidth: 1,
          fill: "#fff",
        },
      },
      args: { r: 6, magnet: true,  },
    },
    
  },
  items: [
    {
      id: "port1",
      group: "in",
    },
    {
      id: "port2",
      group: "out",
    },
    {
      id: "port3",
      group: "left",
    },
    {
      id: "port4",
      group: "right",
    },
  ],
}
export const PORT_HOVER = {
  groups: {
    [X6_PORT_OUT_NAME]: {
      attrs: {
        'circle-outer': {
          stroke: STROKE_BLUE,
          fill: BG_BLUE,
          r: 7
        },
        'circle-inner': {
          fill: STROKE_BLUE,
          r: 5
        }
      }
    }
  }
}

export const PORT_SELECTED = {
  groups: {
    [X6_PORT_OUT_NAME]: {
      attrs: {
        'plus-text': {
          fill: STROKE_BLUE
        },
        'circle-outer': {
          stroke: STROKE_BLUE,
          fill: BG_WHITE
        }
      }
    }
  }
}

export const NODE_STATUS_MARKUP = [
  {
    tagName: 'foreignObject',
    selector: 'fo',
    children: [
      {
        tagName: 'div',
        selector: 'fo-body',
        ns: 'http://www.w3.org/1999/xhtml'
      }
    ],
    style: {
      width: 18,
      height: 18,
      x: 150,
      y: 11
    }
  }
]
export const NODE = {
  shape:'rect',
  width: 180,
  height: 40,
  zIndex:2,
  x:100,
  y:100,
  data:{disableMove:true},
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
      className: 'dag-task-body'
    },
    {
      tagName: 'text',
      selector: 'label'
    },
    {
      tagName: 'text',
      selector: 'title'
    },
    {
      tagName: 'foreignObject',
      selector: 'icon',
      children: [
        {
          tagName: 'div',
          selector: 'icon-body',
          ns: 'http://www.w3.org/1999/xhtml'
        }
      ],
      style: {
        width: 18,
        height: 18,
        x: 20,
        y: 10
      }
    }
  ],
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      rx: 6,
      ry: 6,
      pointerEvents: 'visiblePainted',
      fill: '#fff',
      stroke: '#DAE2EA',
      strokeWidth: 1,
      strokeDasharray: 'none',
      filter: 'none',
      cursor: 'pointer',
    },
    labelImg: {
      width: 25,
      height: 25,
      refX: 12,
      refY: 6,
        cursor: 'pointer',
    }, 
     successImg: {
      width: 15,
      height: 15,
      refX: 155,
      refY: 13,
      cursor: 'pointer',
    },
    label: {
      fontSize: 14,
      fill: '#333',
      fontWeight: 'bold',
      refX: 40,
      x:10,
      refY: 20,
      textAnchor: 'start',
      cursor: 'pointer',
    },
    title: {
      fontFamily: 'Microsoft Yahei',
      fontSize: 14,
      fill: '#fff',
      refX: 210,
      refY: 20
    },
  }
}

export const NODE_HOVER = {
  attrs: {
    body: {
      fill: BG_BLUE,
      stroke: STROKE_BLUE,
      // strokeDasharray: '5,2'
    },
    title: {
      fill: STROKE_BLUE
    }
  }
}

export const NODE_SELECTED = {
  attrs: {
    body: {
      filter: NODE_SHADOW,
      fill: BG_WHITE,
      stroke: STROKE_BLUE,
      // strokeDasharray: '5,2',
      strokeWidth: '1.5'
    },
    title: {
      fill: STROKE_BLUE
    }
  }
}

export const EDGE = {
  attrs: {
    line: {
      stroke: 'rgb(155,169,195)',
      strokeWidth: 1.5, 
      targetMarker: {
        tagName: 'path',
        fill: 'rgb(155,169,195)',
        strokeWidth: 0,
        d: 'M 6 -3 0 0 6 3 Z'
      },
      filter: 'none'
    }
  },
  connector: {
    name: 'rounded',  
    args: {
      radius: 20,
    },
  },
  router: {
    name: 'metro',  
    args: {
      offset: 'center',
    }
  },
  defaultLabel: {
    markup: [
      {
        tagName: 'rect',
        selector: 'body'
      },
      {
        tagName: 'text',
        selector: 'label'
      }
    ],
    attrs: {
      label: {
        fill: '#FFF',
        fontSize: 14,
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        pointerEvents: 'none'
      },
      body: {
        ref: 'label',
        fill: '#B620E0',
        stroke: '#444',
        strokeWidth: 1,
        rx: 4,
        ry: 4,
        refWidth: '140%',
        refHeight: '140%',
        refX: '-20%',
        refY: '-20%'
      }
    },
    position: {
      distance: 0.5,
      options: {
        // absoluteDistance: true,
        // reverseDistance: true
      }
    }
  }
}

export const EDGE_HOVER = {
  attrs: {
    line: {
      stroke: STROKE_BLUE,
      targetMarker: {
        fill: STROKE_BLUE
      }
    }
  },
  defaultLabel: {
    attrs: {
      label: {
        fill: STROKE_BLUE
      },
      body: {
        fill: BG_WHITE,
        stroke: STROKE_BLUE
      }
    }
  }
}

export const EDGE_SELECTED = {
  attrs: {
    line: {
      stroke: STROKE_BLUE,
      targetMarker: {
        fill: STROKE_BLUE
      },
      strokeWidth: 2,
      filter: EDGE_SHADOW
    }
  },
  defaultLabel: {
    attrs: {
      label: {
        fill: STROKE_BLUE
      },
      body: {
        fill: BG_WHITE,
        stroke: STROKE_BLUE
      }
    }
  }
}
